<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link href="/css/shop.css" type="text/css" rel="stylesheet" />
	<link href="/css/Sellerber.css" type="text/css"  rel="stylesheet" />
	<link href="/css/bkg_ui.css" type="text/css"  rel="stylesheet" />
	<link href="/font/css/font-awesome.min.css"  rel="stylesheet" type="text/css" />
	<script src="/js/jquery-1.9.1.min.js" type="text/javascript" ></script>
	<script type="text/javascript" src="/js/jquery.cookie.js"></script>
	<script src="/js/shopFrame.js" type="text/javascript"></script>
	<script src="/js/Sellerber.js" type="text/javascript"></script>
	<script src="/js/layer/layer.js" type="text/javascript"></script>
	<script src="/js/jquery.dataTables.min.js"></script>
	<script src="/js/jquery.dataTables.bootstrap.js"></script>

<!--[if lt IE 9]>
<script src="js/html5shiv.js" type="text/javascript"></script>
<script src="js/respond.min.js"></script>
<script src="js/css3-mediaqueries.js"  type="text/javascript"></script>
  <![endif]-->
<title>产品列表</title>
</head>

<body>
<div class="margin" id="page_style">
<div class="operation clearfix">
<span class="submenu"><a href="javascript:void(0)" name="" class="btn button_btn bg-deep-blue" title="按钮一"><i class="fa  fa-edit"></i>&nbsp;按钮一</a></span>
<span class="submenu"><a href="javascript:void(0)" name="" class="btn button_btn bg-deep-blue" title="按钮二"><i class="fa  fa-edit"></i>&nbsp;按钮二</a></span>
<div class="search  clearfix">
 <label class="label_name">商品搜索：</label><input name="" type="text"  class="form-control col-xs-6"/><button class="btn button_btn bg-deep-blue " onclick=""  type="button"><i class="fa  fa-search"></i>&nbsp;搜索</button>

</div>
</div>
<!--列表展示-->
<div class="list_Exhibition margin-sx ">
 <table class="table table_list table_striped table-bordered" id="sample-table">
  <thead>
  <tr>
  	<th>编号</th>
	<th>书籍名称</th>
	<th>价格</th>
	<th>出版社</th>
	<th>ISBN</th>
	<th>库存</th>
	<th>状态</th>
	<th>类目</th>
	<th>上架时间</th>
	<th>描述</th>
	<th colspan='2'>操作</th>
   </tr>   
  </thead>
  <tbody>
   <#list bookPage.content as book>
		<tr>
			<td>${book.bookId}</td>
			<td>${book.bookName}</td>
			<td>￥${book.bookPrice}</td>
			<td>${book.bookPress}</td>
			<td>${book.bookIsbn}</td>
			<td>${book.bookStock}</td>
			<td>
			<#if book.getBookStatusEnum().code == 0>
			<span class="label label-success label-sm">上架</span>
			<#else>
			<span class="label label-Shelf label-sm">下架</span>
			</#if>
			</td>
			<td>${book.category.categoryName}</td>
			<td>${book.createTime}</td>
			<td>${book.bookDescription}</td>
			<td> <a href="javascript:ovid()" onclick="off_sale(this,${book.bookId})" class="btn bg-green operation_btn">下架</a>
			<a href="javascript:ovid()" onclick="picture_img(this,${book.bookId})" class="btn bg-green operation_btn">图片</a>
				<a href="javascript:ovid()" onclick="picture_img(this,121)" class="btn bg-deep-blue operation_btn">详情</a>
			</td>
		</tr>
	</#list>
  </tbody>
 </table>

</div>

</div>
<ul class="pagination pull-right">
	<#if currentpage lte 1>
		<li class="disabled"><a href="#">上一页</a></li>
	<#else>
		<li><a href="#">上一页</a></li>
	</#if>
	<#list 1..bookPage.getTotalPages() as index>
	<#if currentpage == index>
	<li class="disabled"><a href="#">${index}</a></li>
	<#else>
	<li><a href="/backstage/book/list?page=${index}&size=${size}">${index}</a></li>
	</#if>
	</#list>
	<#if currentpage gte bookPage.getTotalPages()>
		<li class="disabled"><a href="#">下一页</a></li>
	<#else>
		<li><a href="/backstage/book/list?page=${currentpage + 1}&size=${size}">下一页</a></li>
	</#if>
</ul>
</div>
</div>
<!-- 添加轮播图弹出层 -->
<div class="add_Carousel_figure" id="add_Carousel_figure" style=" display:none">
  <table class="table table_list table_striped table-bordered">
   <thead>
    <tr>
     <th  width="50">排序</th>
     <th width="60">图片</th>
     <th>地址</th>
     <th>操作</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>1</td>
     <td><img src="http://pic.cdhdky.com/download/20170523_145545435.jpg"  width="100px" height="80px"/></td>
     <td>http://pic.cdhdky.com/download/20170523_145545435.jpg</td>
     <td>
      <a href="javascript:ovid()">删除</a>
      <a href="javascript:ovid()">修改</a>
     </td>
    </tr>
   </tbody>
  </table>
  <div class="list_carousel" id="Upload">
  <div class="title_name"><i></i>添加轮播图</div>
      <button type="button" class="add_Upload bg-deep-blue" id="add_Upload" onclick="add_Upload()"><i class="fa  fa-plus"></i></button>
<!--     <div class="images_Upload clearfix margin-bottom" id="images_Upload">
      <span class="Upload_img"><input name="" type="file" /></span>
      <a href="javascript:ovid()" class="operating delete_Upload" onclick="delete_Upload(this.id)"><i class="fa fa-remove"></i></a>
      <a href="javascript:ovid()" class="operating" title="预览" onclick="preview_img(this.id)"><i class="fa  fa-image"></i></a>
    </div> -->

  </div>
</div>
<!-- //添加轮播图弹出层 -->
</body>
</html>
<script type="text/javascript">
//设置框架
 $(function() { 
	$("#page_style").frame({
		float : 'left',
		menu_nav:'.operation',
		color_btn:'.skin_select',
	});
});
$(document).ready(function(){
    var spotMax = 8;
  if($('#add_Carousel_figure .table tbody tr').size() >= spotMax) {$(obj).hide();}
  $("#add_Upload").on('click',function(){ 
       var cid =$('.images_Upload').each(function(i){ $(this).attr('id',"Uimages_Upload_"+i)});
       addSpot(this, spotMax, cid);
  });
});

function addSpot(obj, sm ,sid) {
	  $("#Upload").append("<div class='images_Upload clearfix margin-bottom' id='"+sid+"'>"+
	  "<span class='Upload_img'><input name='' type='file' /></span>"+
	  "<a href='javascript:ovid()' class='operating delete_Upload'><i class='fa fa-remove'></i></a>"+
	  "<a href='javascript:ovid()' class='operating' onclick='preview_img(this.id)'><i class='fa  fa-image'></i></a>"+
	  "</div>&nbsp;")  
	.find(".delete_Upload").click(function(){
		if($('div.images_Upload').size()==1){
			layer.msg('请至少保留一张图片!',{icon:0,time:1000});			
			}
			else{
				 $(this).parent().remove();
                 $('#add_Upload').show();
				} 				
				
  });
  if($('.delete_Upload').size() >= sm) {$(obj).hide();layer.msg('当前为最大图片添加量!',{icon:0,time:1000});
}}

/***********图片查看**********/
function picture_img(ojb,id){
	 layer.open({
        type: 1,
        title: '产品轮播图',
		maxmin: true, 
		shadeClose:false, //点击遮罩关闭层
        area : ['800px' , '400px'],
        content:$('#add_Carousel_figure'),
		btn:['提交','取消'],
	 });
	}
	/*产品-删除*/
function picture_del(obj,id){
	layer.confirm('确认要删除吗？',{icon:0,},function(index){
		$(obj).parents("tr").remove();
		layer.msg('已删除!',{icon:1,time:1000});
	});
}
/*商品-停用*/
function off_sale(obj,id){
	layer.confirm('确认要下架吗？'+id,function(index){
		$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn bg-gray operation_btn" onClick="picture_start(this,id)" href="javascript:;" title="上架">上架</a>');
		$(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
		$(obj).remove();
		layer.msg('已下架!',{icon: 5,time:1000});
	});
}

/*商品-启用*/
function picture_start(obj,id){
	layer.confirm('确认要上架吗？',function(index){
		$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn bg-green operation_btn" onClick="picture_stop(this,id)" href="javascript:;" title="下架">下架</a>');
		$(obj).parents("tr").find(".radius").html('<span class="label label-success radius">已启用</span>');
		$(obj).remove();
		layer.msg('已上架!',{icon: 6,time:1000});
	});
}
/*********滚动事件*********/
$("#page_style").niceScroll({  
	cursorcolor:"#888888",  
	cursoropacitymax:1,  
	touchbehavior:false,  
	cursorwidth:"5px",  
	cursorborder:"0",  
	cursorborderradius:"5px"  
});
 $(document).ready(function(){
	var ReturnWindow=$('#contents', parent.document); 
	var width = ReturnWindow.css("width");
	 $("#sample-table").css({"width":width-20+"px"});
	 //反正注释掉就好使了
	 // $('#sample-table').location.replace(location.href);
	 });

 /*********多图上传控件*******************/
 
</script>
